import { InputBase, InputLabel, Select, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useGetThemeStateStore } from '../../../stores/theme';

export const StyledErrorText = styled(Typography)(() => ({
    '&': {
        position: 'absolute',
        color: 'var(--color-negative)',
        bottom: '-25px'
    }
}));

export const GfsInputLabel = styled(InputLabel)(({}) => ({
    '&': {
        color: '#BCB6E9',
        fontWeight: '500',
        fontSize: '1rem'
    }
}));

export const GfsInputBase = styled(InputBase)(({}) => ({
    'label + &': {
        width: '100%'
    },
    '& .MuiInputBase-input': {
        borderRadius: '8px',
        position: 'relative',
        fontSize: 16,
        width: '100%',
        color: '#ffffff',
        background: '#13112A',
        height: '45px',
        padding: '20px',
        boxSizing: 'border-box'
    },
    '&.error .MuiInputBase-input': {
        border: '1px solid var(--color-negative)'
    },
    '&.Mui-disabled .MuiInputBase-input': {
        color: '#ffffff',
        opacity: 0.5
    }
}));

export const GfsInputSelectBase = styled(Select)(({}) => ({
    'label + &': {
        width: '100%'
    },
    '& fieldset': {
        display: 'none'
    },
    '& .MuiInputBase-input': {
        borderRadius: '8px',
        position: 'relative',
        fontSize: 16,
        width: '100%',
        color: '#ffffff',
        background: '#13112A',
        boxSizing: 'border-box'
    },
    '&.error .MuiInputBase-input': {
        border: '1px solid var(--color-negative)'
    }
}));

export const GFSInputSelectBase = styled(Select)(({}) => {
    const {bgColor,bgColor1,txtColor,txtColor2,txtColor3} = useGetThemeStateStore();

    return ({
        'label + &': {
            width: '100%'
        },
        '& fieldset': {
            display: 'none'
        },
        '& .MuiInputBase-input': {
            borderRadius: '8px',
            position: 'relative',
            fontFamily: 'Rubik',
            fontWeight: '400',
            fontSize: '12px',
            lineHeight: '130%',
            width: '100%',
            color: txtColor2+' !important',
            // background: bgColor1+' !important',
            boxSizing: 'border-box',
            // padding:'12px 36px 12px 16px !important',

        },
        '& .MuiInputBase-input.Mui-disabled':{
            WebkitTextFillColor:txtColor3+' !important',
        },
        '&.error .MuiInputBase-input': {
            border: '1px solid var(--color-negative)'
        },

        '.MuiInputBase-input.Mui-disabled': {
            WebkitTextFillColor: 'white',
            color: 'white',
            opacity: 0.7
        },
        '.MuiSvgIcon-root ': {
            fill: txtColor+"  !important",
        }
    });
})
